/* @font-face {
  font-family: 'HarmonyOS Sans TC';
  src: url('../font/HarmonyOS_Sans_TC_Black/HarmonyOS_Sans_TC_Black.ttf'), url('../font/HarmonyOS_Sans_TC_Black/HarmonyOS_Sans_TC_Bold.ttf'), ;
}
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('../font//AlibabaPuHuiTi/AlibabaPuHuiTi-3-105-Heavy.ttf'), url('../font//AlibabaPuHuiTi/AlibabaPuHuiTi-3-105-Heavy.ttf');
} */
@import url('http://at.alicdn.com/t/c/font_4195471_e3acor9ry89.css');
@import url('http://at.alicdn.com/t/c/font_4203463_hisxma3xtds.css');
* {
  margin: 0;
  padding: 0;
  font-family: 'HarmonyOS Sans TC';
}
body {
  width: 100%;
  /* height: 1080px; */
  height: 100vh;
  margin: 0 ;
  background-color: #f2f3f5;
  box-sizing: border-box;
  line-height: 1;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.font-green {
  color: #48cfad;
}
.font-blue {
  color: #409eff;
}
.font-orange {
  color: #ffbd4a;
}
.font-pink {
  color: #f4658d;
}
.line-blue {
  border-bottom: 2px solid #aed2fc;
}
.layout-container {
  .container {
    display: flex;
    .layout-right {
      padding-right: 5px;
      .right-content {
        height: 95%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
      }
      .right-content > div {
        background-color: #fff;
      }

    }
  }
}

.content-wrapped {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  width: 100%;
  
}
/* 右侧盒子 */
.content-wrapped .content-right  {
  /* width: 1594px; */
  width: 77%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}




.add-port-column {
  width: 100%;
  height: 7%;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
  .add-port-left {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    div {
      font-size: 22px;
      color: #707070;
      height:100%;
      line-height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #f1fbfd;
    }
    .new-get-port {
      width: 169px;
      height: 100%;
      background-color: #f1fbfd;
      .new-get-en {
        color: #48cfad;
        background-color: #f1fbfd;
      }
      .new-get-cn {
        background-color: #f1fbfd;
      }
    }
    .font-size-add {
      font-size: 30px;
      height: 100%;
      line-height: 50px;
      margin-left: 15px;
    }
    .new-post-port {
      width: 169px;
      height: 100%;
      margin-left: 20px;
      .new-post-en {
        color: #409eff;
      }
      .new-post-cn {
        font-size: 22px;
      }
    }
    .font-size-add2 {
      color: #707070;
      font-size: 32px;
      line-height: 50px;
      margin-left: 10px;
    }
  }
  .add-manage-right {
    width: 103px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-right: 20px;
    flex-direction: column;
    line-height: 41px;
    .manage {
      height: 80%;
      width: 103px;
      display: flex;
      justify-content: space-around;
      border: #e4e4e4 1px solid;
      .font-size-right {
        color: #707070;
      }
      .manage-envi {
        height: 41px;
        font-size: 18px;
      }
    }
  }
}
// 搜索栏目
.search-column {
  margin: 4px 0;
  width: 100%;
  height: 7%;
  display: flex;
  justify-content: space-between;
  .search-left {
    width: 20%;
    height: 100%;
    display: flex;
    // justify-content: flex-start;
    // margin-right: 10px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
    .search-left-wrapped {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-right: #e4e4e4 2px solid;
      .search-get {
        width: 50px;
        height: 100%;
        font-size: 26px;
        display: flex;
        align-items: center;
        color: #48cfad;
      }
      .font-size-right {
        font-size: 30px;
        color: #707070;
      }
    }
    .path {
      font-size: 28px;
      color: #707070;
      line-height: 45px;
      margin-left: 20px;
    }
  }
  .search-mid {
    width: 70%;
    height: 100%;
    // padding-right: 10px;
    border-radius: 15px;
    .mid-input {
      width: 100%;
      height: 100%;
    }
  }
  .search-right {
    width: 370px;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    background-color: #f2f3f5;
    div {
      height: 100%;
      width: 152px;
      font-size: 32px;
      text-align: center;
      line-height: 45px;
      border-radius: 5px;
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
    }
    .search-send {
      width: 45%;
      height: 100%;
      background-color: #faf3dd;
    }
    .search-save {
      width: 45%;
      height: 100%;
      color: #ffffff;
      background-color: #aed9e0;
    }
  }
}

.write-column {
  width: 100%;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
  margin-bottom: 3px;
  .requset-params-column {
    // position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #707070;
    .params-header {
      padding: 0 5px;
      height: 10%;
      // border-bottom: #eaf2ff 2px solid;
    }
    .params-header ul {
      width: 600px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      li {
        width: 68px;
        height: 40px;
        font-size: 18px;
        line-height: 50px;
      }
      li:nth-child(1) {
        // border-bottom: 2px solid #aed2fc;
      }
    }
    .params-body {
      width: 95%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      table {
        // width: 1548px;
        // height: 336px;

        width: 100%;
        height: 90%;
        border: #e4e4e4 1px solid;
        border-radius: 3px;

        tr {
          border: #e4e4e4 1px solid;
          td {
            text-align: center;
            font-size: 16px;
            border: #e4e4e4 1px solid;
          }
          td:nth-child(1) {
            width: 13%;
          }
          td:nth-child(2) {
            width: 19%;
          }
          td:nth-child(3) {
            width: 9%;
          }
          td:nth-child(4) {
            text-align: left;
            padding-left: 156px;
          }
        }
        tr:nth-child(1),
        tr:nth-child(2) {
          height: 30px;
        }
        .font-gary {
          color: #b7b7b7;
        }
      }
    }
  }
}

.result-column {
  width: 100%;
  height: 35%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #707070;
  // box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
  .result-column-wrapped {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    .result-column-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      .result-column-left {
        width: 100%;
      }
      .img-size {
        width: 159px;
        height: 131px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .click-button-result{
        font-size: 10px;
        margin-bottom: 15px;
      }
    }
  }
}




